<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			body {
				background-color: #F9F9F9;
				font-size: 14px;
				font-family: "微软雅黑";
			}
			
			.main {
				height: 100%;
			}
			
			.content {
				width: 854px;
				height: 600px;
				background-color: white;
				margin: 0 auto;
				margin-top: 46px;
			}
			
			.logo {
				width: 100%;
				text-align: center;
				height: 88px;
			}
			
			.title {
				height: 45px;
				line-height: 45px;
				width: 100%;
				text-align: center;
				font-size: 30px;
				color: #333;
				margin-bottom: 20px;
			}
			
			.register_body {
				width: 332px;
				height: 467px;
				margin: 0 auto;
				position: relative;
			}
			
			.register_body h4 {
				font-weight: normal;
				color: #333333;
				margin-bottom: 5px;
			}
			
			.region {
				font-size: 14px;
			}
			
			#region_1 {
				width: 274px;
				height: 40px;
				border-top: 1px solid #E8E8E8;
				border-left: 1px solid #E8E8E8;
				border-bottom: 1px solid #E8E8E8;
				/*display: inline-block;*/
				line-height: 42px;
				padding-left: 15px;
			}
			
			#region_2 {
				width: 42px;
				height: 42px;
				/*display: inline-block;*/
				background-image: url(img/78c521202199074994e614dcf7ab6171.png);
			}
			
			.region p {
				float: left;
				color: #666;
			}
			
			#regionalert {
				color: #666;
				margin-top: 55px;
			}
			
			#phonetitle {
				margin-top: 10px;
			}
			
			.phonenum_left p {
				color: #666;
			}
			
			.phonenum>div {
				float: left;
			}
			
			.phonenum_left {
				width: 62px;
				height: 40px;
				line-height: 40px;
				background-image: url(img/36f64297344d7a4bb0956f436699f3d6.png);
				background-repeat: no-repeat;
				background-position: 45px 13px;
				border-left: 1px solid #E8E8E8;
				border-top: 1px solid #E8E8E8;
				border-bottom: 1px solid #E8E8E8;
				padding-left: 10px;
			}
			
			.phonenum_right input {
				display: block;
				width: 246px;
				height: 40px;
				outline: none;
				padding-left: 10px;
				border: 1px solid #E8E8E8;
			}
			
			.phonenum span {
				clear: both;
				color: #f56600;
				font-size: 14px;
				line-height: 14px;
				/*display: none;*/
				position: relative;
				top: 10px;
			}
			
			.phonenum {
				overflow: hidden;
				height: 80px;
			}
			
			.phonenum label {
				display: inline-block;
				width: 9px;
				height: 14px;
				border-radius: 50%;
				background-color: #F56600;
				color: white;
				padding-left: 5px;
				margin-right: 5px;
			}
			
			#yzm {
				clear: both;
			}
			
			.yzm_left input {
				width: 170px;
				height: 40px;
				padding-left: 10px;
				outline: none;
			}
			
			.yzm>div {
				float: left;
			}
			
			.yzm span {
				clear: both;
				color: #f56600;
				font-size: 14px;
				line-height: 14px;
				/*display: none;*/
				position: relative;
				top: 10px;
			}
			
			
			.yzm label {
				display: inline-block;
				width: 9px;
				height: 14px;
				border-radius: 50%;
				background-color: #F56600;
				color: white;
				padding-left: 5px;
				margin-right: 5px;
			}
			
			.yzm {
				
				height: 80px;
				overflow: hidden;
			}
			
			.ljzc {
				width: 331px;
				height: 42px;
				background-color: #ff6700;
				font-size: 14px;
				color: white;
				line-height: 42px;
				text-align: center;
				margin-top: 5px;
			}
			
			.ljzc:hover {
				background-color: #ff936a;
				cursor: pointer;
			}
			
			
			.content_foot {
				font-size: 14px;
				color: #9d9d9d;
				/*color: white;*/
				margin-top: 10px;
			}
			
			.content_foot a {
				text-decoration: none;
				color: black;
				font-weight: bold;
			}
			
			.foot {
				width: 1130px;
				margin: 0 auto;
				height: 130px;
				font-size: 12px;
				color: #757575;
			}
			
			.foot li {
				list-style-type: none;
				display: inline;
			}
			
			.foot_top {
				margin-top: 10px;
			}
			
			.foot_bottom {
				margin-top: 18px;
			}
			
			.foot ul {
				overflow: hidden;
				text-align: center;
			}
			
			.foot li:hover a {
				color: black;
				cursor: pointer;
			}
			
			.foot_top span {
				margin: 0 10px;
			}
			
			.foot a {
				text-decoration: none;
				color: #757575
			}
			
			.fujia1 {
				width: 330px;
				height: 270px;
				background-color: white;
				position: absolute;
				z-index: 100;
				/*display: none;*/
				/*border: 1px solid blue;*/
				border-left: 1px solid #E8E8E8;
				border-right: 1px solid #E8E8E8;
				border-bottom: 1px solid #E8E8E8;
				top: 65px;
				overflow: auto;
			}
			
			.fujia1_content ul {
				list-style-type: none;
			}
			
			.fujia1_content ul li {
				line-height: 40px;
				padding-left: 17px;
				border-bottom: 1px solid #E0E0E0;
			}
			
			.fujia1_top {
				/*border: 1px solid red;*/
				/*width: 100%;*/
			}
			
			.fujia1_top input {
				width: 284px;
				height: 32px;
				margin: 10px auto;
				display: block;
				outline: none;
				padding-left: 10px;
			}
			
			.fujia1_usual {
				background-color: #FCDECC;
				height: 30px;
				padding-left: 17px;
				color: #EF5B00;
				line-height: 30px;
			}
			
			.fujia1_content ul li:hover {
				background-color: #EAEAEA;
				cursor: pointer;
			}
			
			.region:hover {
				cursor: pointer;
			}
			
			.fujia2 {
				width: 330px;
				height: 270px;
				background-color: white;
				position: absolute;
				z-index: 100;
				/*display: none;*/
				/*border: 1px solid blue;*/
				border-left: 1px solid #E8E8E8;
				border-right: 1px solid #E8E8E8;
				border-bottom: 1px solid #E8E8E8;
				top: 169px;
				overflow: auto;
			}
			
			.fujia2_content ul {
				list-style-type: none;
			}
			
			.fujia2_content ul li {
				line-height: 40px;
				padding-left: 17px;
				border-bottom: 1px solid #E0E0E0;
			}
			
			.fujia2_top input {
				width: 284px;
				height: 32px;
				margin: 10px auto;
				display: block;
				outline: none;
				padding-left: 10px;
			}
			
			.fujia2_usual {
				background-color: #FCDECC;
				height: 30px;
				padding-left: 17px;
				color: #EF5B00;
				line-height: 30px;
			}
			
			.fujia2_content ul li:hover {
				background-color: #EAEAEA;
				cursor: pointer;
			}
			
			.fujia2_content span {
				float: right;
				color: #999999;
				margin-right: 10px;
			}
			
			.phonenum_left:hover {
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="content">
				<div class="logo">
					<img height="50"width="50" src="img/f42cfcbf22e3a84597ccf0f0e596f478.png" />
				</div>
				<div class="title">
					注册小米账号
				</div>
				<div class="register_body">
					<form action="#" method="action" id="myform">

						<h4>国家/地区</h4>
						<div class="region" onclick="region(this)">
							<p id="region_1">中国</p>
							<p id="region_2"></p>
						</div>
						<div class="fujia1" id="fujia1" style="display: none;">
							<div class="fujia1_top">
								<input type="text" name="" id="" value="" />
							</div>
							<div class="fujia1_usual">
								常用
							</div>
							<div class="fujia1_content">
								<ul>
									<li onclick="changeregion(this)">中国</li>
									<li onclick="changeregion(this)">美国</li>
									<li onclick="changeregion(this)">法国</li>
									<li onclick="changeregion(this)">德国</li>
									<li onclick="changeregion(this)">俄罗斯</li>
									<li onclick="changeregion(this)">日本</li>
									<li onclick="changeregion(this)">尼日利亚</li>
									<li onclick="changeregion(this)">中国台湾</li>
									<li onclick="changeregion(this)">中国香港</li>
									<li onclick="changeregion(this)">奥里地</li>
									<li onclick="changeregion(this)">巴西</li>
									<li onclick="changeregion(this)">加拿大</li>
									<li onclick="changeregion(this)">墨西哥</li>
								</ul>
							</div>
						</div>
						<div id="regionalert">
							成功注册帐号后，国家/地区将不能被修改
						</div>
						<h4 id="phonetitle">手机号码</h4>
						<div class="phonenum">
							<div class="phonenum_left" onclick="phonenumshow()">
								<p id="regionnum">+86</p>
							</div>
							<div class="phonenum_right">
								<input type="text" name="phonenumber" id="phonenumber" value="" onfocus="clean_phone()" onblur="checkphone(this)" placeholder="请输入手机号码" />
							</div>
							<div class="fujia2" id="fujia2" style="display: none;">
								<div class="fujia2_top">
									<input type="text" name="" id="" value="" />
								</div>
								<div class="fujia2_usual">
									常用
								</div>
								<div class="fujia2_content">
									<ul>

										<li onclick="changephone(this)">中国<span>+86</span></li>
										<li onclick="changephone(this)">美国<span>+32</span></li>
										<li onclick="changephone(this)">法国<span>+54</span></li>
										<li onclick="changephone(this)">德国<span>+52</span></li>
										<li onclick="changephone(this)">俄罗斯<span>+95</span></li>
										<li onclick="changephone(this)">日本<span>+34</span></li>
										<li onclick="changephone(this)">尼日利亚<span>+214</span></li>
										<li onclick="changephone(this)">中国台湾<span>+886</span></li>
										<li onclick="changephone(this)">中国香港<span>+852</span></li>
										<li onclick="changephone(this)">奥里地<span>+3</span></li>
										<li onclick="changephone(this)">巴西<span>+55</span></li>
										<li onclick="changephone(this)">加拿大<span>+25</span></li>
										<li onclick="changephone(this)">墨西哥<span>+47</span></li>
									</ul>
								</div>
							</div>
							<span id="unphonenum" class="username" style="display: none;">
									<label>!</label>请输入手机号码
								</span>
						</div>
						<h4 id="txyzm">图形验证码</h4>
						<div class="yzm">
							<div class="yzm_left">
								<input type="text" name="yzm" id="yzm" value="" onfocus="clean_yzm()" onblur="checkyzm(this)" placeholder="图片验证码" />
							</div>
							<div class="yzm_right">
								<img height="50" width="100" src="img/ec7ea98fa465f54c976ca4835bb24801.png" />
							</div>
							<div class="shuru"><span id="unyzm" class="username" style="display: none;">
																<label>!</label>请输入图片验证码
															</span></div>
						</div>
						<div class="ljzc" onclick="tijiao()">
							立即注册
						</div>
					</form>
					<div class="content_foot">
						注册帐号即表示您同意并愿意遵守小米
						<a href="#"><strong>用户协议</strong></a>和
						<a href="#"><strong>隐私政策</strong></a>
					</div>
				</div>
			</div>
			<div class="foot">
				<div class="foot_top">
					<ul>
						<li>
							<a href="">简体</a><span>|</span></li>
						<li>
							<a href="">繁体</a><span>|</span></li>
						<li>
							<a href="">English</a><span>|</span></li>
						<li>
							<a href="">常见问题</a>
						</li>
					</ul>
				</div>
				<div class="foot_bottom">
					<ul>
						<li>小米公司版权所有-京ICP备10046444-</li>
						<li><img height="20" width="20" src="img/47bf96ecece8dd409589b4e02d24150c.png" /></li>
						<li>
							<a href="#">京公网安备11010802020134号</a>-京ICP证110507号</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function region(t) {
				var fj1 = t.parentNode.children[2];
				//					fj1.style.display = "block";
				if(fj1.style.display == "none") {
					fj1.style.display = "block";
				} else {
					fj1.style.display = "none";

				}
			}

			function changeregion(t) {
				var mubiao = t.parentNode.parentNode.parentNode.parentNode.children[1].children[0];
				mubiao.innerHTML = t.innerHTML;
				var fj1 = document.getElementById("fujia1");
				fj1.style.display = "none";
			}

			function phonenumshow(t) {
				var fj2 = document.getElementById("fujia2");
				//					fj1.style.display = "block";
				if(fj2.style.display == "none") {
					fj2.style.display = "block";
				} else {
					fj2.style.display = "none";

				}
			}

			function changephone(t) {
				var phnum = t.children[0].innerHTML;
				var mubiao = document.getElementById("regionnum");
				mubiao.innerHTML = phnum;
				var fj2 = document.getElementById("fujia2");
				fj2.style.display = "none";
			}

			function checkphone(t) {
				var reg = /^1\d{10}$/;
				if(!(reg.test(t.value))) {
					var ckp = document.getElementById("unphonenum");
					ckp.style.display = "inline";
					return false;

				}
			}

			function clean_phone() {
				var ckp = document.getElementById("unphonenum");
				ckp.style.display = "none";
			}

			function checkyzm(t) {
				var reg = /^[A-z]{4}$/;
				if(!(reg.test(t.value))) {
					var ckyzm = document.getElementById("unyzm");
					ckyzm.style.display = "inline";
				}
			}

			function clean_yzm() {
				var ckp = document.getElementById("unyzm");
				ckp.style.display = "none";
			}

			function tijiao() {
				var phone = document.getElementById("phonenumber").value;
//				var yanzhengma = document.getElementById("yzm").value;
				var yanzhengma = document.getElementById("yzm").value;
				var ckp = document.getElementById("unphonenum");
				var ckyzm = document.getElementById("unyzm");
				var regphone = /^1\d{10}$/;
				var regyzm = /^[A-z]{4}$/;
				if(!(regphone.test(phone))){
					ckp.style.display = "inline";
				}else if(!(regyzm.test(yanzhengma))){
					ckyzm.style.display = "inline";
				}else{
					document.getElementById("myform").submit();

				}
					console.log(yanzhengma);
					console.log(phone);
			}
		</script>
	</body>


</html>
